<template>
  <div class="review-content">
    <div class="page-header">
      <h1 class="page-title">📚 复习中心</h1>
      <p class="page-subtitle">巩固知识，查漏补缺</p>
    </div>

    <!-- 复习概览卡片 -->
    <div class="overview-cards">
      <div class="overview-card">
        <div class="card-icon">📝</div>
        <div class="card-content">
          <h3>错题总数</h3>
          <p class="card-number">{{ wrongQuestionsCount }}</p>
          <p class="card-desc">需要复习的题目</p>
        </div>
      </div>
      
      <div class="overview-card">
        <div class="card-icon">📅</div>
        <div class="card-content">
          <h3>今日复习</h3>
          <p class="card-number">{{ todayReviewCount }}</p>
          <p class="card-desc">今日需要复习的题目</p>
        </div>
      </div>
      
      <div class="overview-card">
        <div class="card-icon">🎯</div>
        <div class="card-content">
          <h3>掌握度</h3>
          <p class="card-number">{{ masteryRate }}%</p>
          <p class="card-desc">知识点掌握程度</p>
        </div>
      </div>
    </div>

    <!-- 复习功能区域 -->
    <div class="review-sections">
      <!-- 错题本 -->
      <div class="review-section">
        <div class="section-header">
          <h2>📖 错题本</h2>
          <button class="start-btn primary" @click="startWrongQuestionsReview">
            开始复习
          </button>
        </div>
        <div class="section-content">
          <div class="wrong-questions-list">
            <div 
              v-for="question in wrongQuestions" 
              :key="question.id"
              class="question-item"
              @click="reviewQuestion(question)"
            >
              <div class="question-info">
                <span class="question-type">{{ question.type }}</span>
                <span class="question-title">{{ question.title }}</span>
              </div>
              <div class="question-meta">
                <span class="wrong-count">错误 {{ question.wrongCount }} 次</span>
                <span class="last-review">{{ question.lastReview }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 间隔复习计划 -->
      <div class="review-section">
        <div class="section-header">
          <h2>📅 间隔复习计划</h2>
          <button class="start-btn success" @click="startSpacedReview">
            开始间隔复习
          </button>
        </div>
        <div class="section-content">
          <div class="spaced-review-calendar">
            <div class="calendar-header">
              <h3>复习日历</h3>
              <div class="calendar-nav">
                <button class="nav-btn" @click="prevMonth">‹</button>
                <span>{{ currentMonth }}</span>
                <button class="nav-btn" @click="nextMonth">›</button>
              </div>
            </div>
            <div class="calendar-grid">
              <div 
                v-for="day in calendarDays" 
                :key="day.date"
                class="calendar-day"
                :class="{ 
                  'has-review': day.hasReview,
                  'today': day.isToday,
                  'completed': day.completed
                }"
              >
                <span class="day-number">{{ day.day }}</span>
                <span v-if="day.reviewCount" class="review-count">{{ day.reviewCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 历史错题再练习 -->
      <div class="review-section">
        <div class="section-header">
          <h2>🔄 历史错题再练习</h2>
          <button class="start-btn warning" @click="startHistoryReview">
            开始练习
          </button>
        </div>
        <div class="section-content">
          <div class="history-stats">
            <div class="stat-item">
              <span class="stat-label">总练习次数</span>
              <span class="stat-value">{{ totalPracticeCount }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">正确率</span>
              <span class="stat-value">{{ accuracyRate }}%</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">平均用时</span>
              <span class="stat-value">{{ averageTime }}分钟</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReviewContent',
  data() {
    return {
      wrongQuestionsCount: 25,
      todayReviewCount: 8,
      masteryRate: 78,
      currentMonth: '2024年1月',
      totalPracticeCount: 156,
      accuracyRate: 85,
      averageTime: 3.2,
      wrongQuestions: [
        {
          id: 1,
          type: '算法',
          title: '快速排序的时间复杂度分析',
          wrongCount: 3,
          lastReview: '2天前'
        },
        {
          id: 2,
          type: '网络',
          title: 'TCP三次握手过程详解',
          wrongCount: 2,
          lastReview: '1天前'
        },
        {
          id: 3,
          type: '数据库',
          title: 'SQL查询优化技巧',
          wrongCount: 4,
          lastReview: '3天前'
        }
      ],
      calendarDays: [
        { day: 1, hasReview: true, reviewCount: 5, completed: true },
        { day: 2, hasReview: false, reviewCount: 0, completed: false },
        { day: 3, hasReview: true, reviewCount: 3, completed: true },
        { day: 4, hasReview: false, reviewCount: 0, completed: false },
        { day: 5, hasReview: true, reviewCount: 8, completed: true },
        { day: 6, hasReview: false, reviewCount: 0, completed: false },
        { day: 7, hasReview: true, reviewCount: 2, completed: true },
        { day: 8, hasReview: true, reviewCount: 6, completed: false, isToday: true },
        { day: 9, hasReview: true, reviewCount: 4, completed: false },
        { day: 10, hasReview: false, reviewCount: 0, completed: false }
      ]
    }
  },
  methods: {
    startWrongQuestionsReview() {
      this.$message.info('开始错题复习')
      // 跳转到错题复习页面
    },
    startSpacedReview() {
      this.$message.info('开始间隔复习')
      // 跳转到间隔复习页面
    },
    startHistoryReview() {
      this.$message.info('开始历史错题练习')
      // 跳转到历史练习页面
    },
    reviewQuestion(question) {
      this.$message.info(`复习题目: ${question.title}`)
      // 跳转到具体题目复习页面
    },
    prevMonth() {
      this.$message.info('上个月')
    },
    nextMonth() {
      this.$message.info('下个月')
    }
  }
}
</script>

<style scoped>
.review-content {
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
}

/* 概览卡片 */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.overview-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  transition: transform 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
}

.card-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.card-content h3 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.card-number {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.card-desc {
  margin: 0;
  opacity: 0.9;
  font-size: 0.9rem;
}

/* 复习功能区域 */
.review-sections {
  display: grid;
  gap: 30px;
}

.review-section {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #2c3e50;
}

.start-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.start-btn.primary {
  background: #6c757d;
  color: white;
}

.start-btn.success {
  background: #27ae60;
  color: white;
}

.start-btn.warning {
  background: #f39c12;
  color: white;
}

.start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 错题本样式 */
.wrong-questions-list {
  display: grid;
  gap: 15px;
}

.question-item {
  padding: 15px;
  border: 1px solid #e1e8ed;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.question-item:hover {
  border-color: #6c757d;
  background: rgba(108, 117, 125, 0.05);
  transform: translateX(5px);
}

.question-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.question-type {
  background: #6c757d;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.question-title {
  font-weight: 600;
  color: #2c3e50;
}

.question-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.wrong-count {
  color: #e74c3c;
  font-weight: 600;
}

/* 间隔复习日历 */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-header h3 {
  margin: 0;
  color: #2c3e50;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e1e8ed;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn:hover {
  border-color: #6c757d;
  color: #6c757d;
}

.calendar-nav span {
  font-weight: 600;
  color: #2c3e50;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.calendar-day:hover {
  border-color: #6c757d;
  background: rgba(108, 117, 125, 0.1);
}

.calendar-day.has-review {
  background: rgba(108, 117, 125, 0.1);
  border-color: #6c757d;
}

.calendar-day.today {
  background: #6c757d;
  color: white;
  border-color: #6c757d;
}

.calendar-day.completed {
  background: #27ae60;
  color: white;
  border-color: #27ae60;
}

.day-number {
  font-weight: 600;
  font-size: 0.9rem;
}

.review-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
}

/* 历史统计 */
.history-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.stat-label {
  display: block;
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .review-content {
    padding: 15px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .overview-cards {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .calendar-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  
  .calendar-day {
    font-size: 0.8rem;
  }
  
  .history-stats {
    grid-template-columns: 1fr;
  }
}
</style>
